<template>
  <view class="merchant">
    <view class="header">
      <wd-checkbox
        :model-value="isSelected"
        @update:model-value="selectHandle"
      />
      <v-icon
        size="36rpx"
        src="@/static/icons/cart-merchant.svg"
        @click="navigateToMerchant"
      />
      <view
        class="merchant-name"
        @click="navigateToMerchant"
      >
        <view class="name-text">
          {{ merchant.merchant_name }}
        </view>
        <wd-icon
          name="arrow-right"
          size="24rpx"
          color="#333333"
        />
      </view>
      <!-- <view class="coupon">
        优惠券
      </view> -->
    </view>
    <template
      v-for="(product, index) in merchant.cart_list"
      :key="product.id"
    >
      <view
        v-if="index !== 0"
        class="divider"
      />
      <cart-product
        :product="product"
        :is-editing="isEditing"
        :edit-selecting-list="editSelectingList"
        @refresh="$emit('refresh')"
        @select-sku="$emit('select-sku', product)"
        @edit-select="(val, list) => $emit('edit-select', val, list)"
      />
    </template>
  </view>
</template>

<script setup lang="ts">
import CartProduct from './cart-product.vue';

const props = defineProps<{
  merchant: CartMerchantVO;
  isEditing: boolean;
  editSelectingList: string[];
}>();

const emits = defineEmits<{
  refresh: [];
  'select-sku': [product: CartVO];
  'edit-select': [select: boolean, list: string[]];
}>();

const merchant = toRef(props, 'merchant');
const isEditing = toRef(props, 'isEditing');
const editSelectingList = toRef(props, 'editSelectingList');

const isSelected = computed(() => {
  if (isEditing.value) {
    const list = editSelectingList.value;
    return merchant.value.cart_list.every((item) => list.includes(item.id));
  } else {
    const avaliableList = merchant.value.cart_list.filter((product) => {
      if (product.status === 'DISABLED') return false;
      if (!product.sale_status) return false;
      return true;
    });
    if (avaliableList.length === 0) return false;
    return avaliableList.every((product) => product.selected === 'SELECTED');
  }
});
const selectHandle = async () => {
  if (isEditing.value) {
    emits(
      'edit-select',
      !isSelected.value,
      merchant.value.cart_list.map((item) => item.id)
    );
  } else {
    const selected = isSelected.value ? 'UNCHECK' : 'SELECTED';
    const avaliableList = merchant.value.cart_list.filter((product) => {
      if (product.status === 'DISABLED') return false;
      if (!product.sale_status) return false;
      return true;
    });
    if (selected === 'SELECTED' && !avaliableList.length) return;
    const response = await $api.postCartEditSelects(
      selected === 'SELECTED'
        ? avaliableList.map((item) => ({ id: item.id, selected }))
        : merchant.value.cart_list.map((item) => ({ id: item.id, selected }))
    );
    switch (response.__error) {
      case undefined:
        emits('refresh');
        break;
    }
  }
};

const navigateToMerchant = () => {
  uni.navigateTo({
    url: `/pages/merchant/merchant-details?id=${merchant.value.merchant_id}`
  });
};
</script>

<style lang="scss" scoped>
.merchant {
  padding: 28rpx 24rpx;
  margin: 0 24rpx 24rpx;
  background-color: white;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  gap: 28rpx;
  .header {
    height: 40rpx;
    display: flex;
    align-items: center;
    gap: 8rpx;
    .merchant-name {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      .name-text {
        font-size: 28rpx;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
      }
    }
    .coupon {
      padding: 0 8rpx;
      line-height: 36rpx;
      font-size: 24rpx;
      color: #ff2f3b;
      border-radius: 18rpx;
      background-color: rgba(255, 47, 59, 0.1);
    }
  }
  .divider {
    height: 1px;
    background-color: #eeeeee;
  }
}
</style>
